<template>
    <div>
        姓名：
        <input type="text" v-model="query.Name">
        年龄：
        <input type="text" v-model="query.Age">-<input type="text" v-model="query.EAge">
        开始时间：
        <input type="date" v-model="query.startime">-<input type="date" v-model="query.endime">
        状态：
        <select v-model="query.State">
            <option value="">请选择</option>
            <option value="true">启用</option>
            <option value="false">禁用</option>
        </select>
        会员等级：
        <select v-model="query.LevelId">
            <option value="0">请选择</option>
            <option value="1">青铜会员</option>
            <option value="2">黄金会员</option>
            <option value="3">铂金会员</option>
            <option value="4">钻石会员</option>
            <option value="5">王者会员</option>
        </select>
        <input type="button" value="查询" @click="Cha">
        <input type="button" value="重置" @click="chong">
        <table border="1">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="selectallstate" @change="selectall">
                    </th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>状态</th>
                    <th>会员等级</th>
                    <th>时间</th>
                    <th>图片</th>

                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <th>
                        <input type="checkbox" v-model="ldlist" :value="d.Id">
                    </th>
                    <th>{{ d.Name }}</th>
                    <th>{{ d.Sex }}</th>
                    <th>{{ d.Age }}</th>
                    <th>{{ d.State?"启用":"禁用" }}</th>
                    <th>{{ d.LevelName }}</th>
                    <th>{{ moment(d.CreateTime).format("YYYY-MM-DD HH:mm:ss") }}</th>
                    <th>
                        <img :src="'https://localhost:7101/'+d.Img" style="width: 100px; height: 100px;">
                    </th>
                     <th>
                        <input type="button" value="删除" @click="Del(d.Id)">
                     </th>    
                      <th>
                        <input type="button" value="编辑" @click="Update(d.Id)">
                     </th>    
                </tr>
            </tbody>
        </table>
        一共{{querydata.count}}   条
        当前 {{ query.PageIndex }}    页
        一共 {{ querydata.pagecount }}  页
        一页{{ query.PageSize }}   条

        <input type="button" value="1" @click="Fen(1)">
        <input type="button" value="2" @click="Fen(3)">
        <input type="button" value="3" @click="Fen(3)">
        <input type="button" value="4" @click="Fen(4)">

        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        每页
        <select v-model="query.PageSize" @click="Pageload">
            <option>2</option>
            <option>3</option>
            <option>10</option>
            <option>15</option>
        </select>
        行
        <input type="button" value="批量逻辑删除" @click="UpDel">
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { onMounted } from 'vue';
import moment from 'moment';
import { useRouter } from 'vue-router';

const ldlist=ref([0]);
const selectallstate=ref(false);


const UpDel=()=>{
    if(ldlist.value.length>1){
        if(confirm('确定删除吗？')){
            axios.delete("https://localhost:7101/api/Member/DeleteMember",{params:{Id:ldlist.value.toString()}}).then(res=>{
                if(res.data>0){
                    alert('批量删除成功')
                    Show();
                }
                else{
                    alert('失败')
                }
            })
              
        }
    }
    else{
        alert('请选择要删除的')
        return;
    }
}


const selectall=()=>{
    if(selectallstate.value==true){
        for(var i=0;i<data.value.length;i++){
            ldlist.value.push(data.value[i].Id);
        }
    }
    else{
        ldlist.value=[0];
    }
}



const Pageload=()=>{
    Show();
}


const chong=()=>{
    query.value.Name=""
    query.value.Age=0
    query.value.EAge=0
    query.value.startime=""
    query.value.endime=""
    query.value.State=true
    query.value.LevelId=0
}

const Cha=()=>{
    query.value.PageIndex=1;
    Show();
}

const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }

    if(val==4){
       query.value.PageIndex=querydata.value.pagecount;
       Show();
    }

}


const data=ref([{
    "Id": 0,
  "Name": "",
  "Sex": "",
  "Age": 0,
  "CreateTime": "2025-04-05T12:07:36.980Z",
  "State": true,
  "LevelId": 0,
  "Delete": true,
  "Img": "",
   "LevelName": ""
}])


onMounted(()=>{
    Show()
})

const query=ref({
    "PageIndex":1,
    "PageSize":2,
    "Name":"",
    "Age":0,
    "EAge":0,
    "startime":"",
    "endime":"",
    "State":true,
    "LevelId":0,

})


const querydata=ref({
    count:0,
    pagecount:0
})



const Show=()=>{
    axios.get("https://localhost:7101/api/Member/ShowMember",{params:query.value}).then(res=>{
        data.value=res.data.list;
        querydata.value.count=res.data.count;
        querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize)
    })
}



const Del=(val:any)=>{
    if(confirm('确定删除吗'))
    {
        axios.delete("https://localhost:7101/api/Member/Del",{params:{Id:val}}).then(res=>{
                if(res.data>0){
                    alert('删除成功')
                    Show();
                }
                else{
                    alert('失败')
                }
            })
    }
    
}


const rouer=useRouter();

const Update=(val:any)=>{
    rouer.push({path:"/UpdateMemView",query:{Id:val}})
}



</script>

